// 品牌卡片
export const addBrandCard = (editor) => {

  const { Components } = editor;

  Components.addType('addBrandCard', {
    model: {
      defaults: {
        name: 'addBrandCard',
        droppable: false,
        attributes: {
          class: 'brand'
        },
        components: [
          {
            type: 'image',
            attributes: {
              class: 'brand-img',
              src: 'https://cdn4.codesign.qq.com/prototypes/2023/08/10/xDP3923q32qn08ZwlKp10/vlppcsjsxuhbexfp/4dac88d3b0b8ecf20a9818904b852796.svg'
            }
          },
          {
            type: 'div',
            attributes: {
              class: 'brand-content'
            },
            components: [
              {
                type: 'div',
                components: [
                  {
                    tagName: 'span',
                    type: 'text',
                    attributes: {
                      class: 'brand-content-text'
                    },
                    content: '在线客服：'
                  },
                  {
                    tagName: 'span',
                    type: 'text',
                    attributes: {
                      class: 'brand-content-icon'
                    },
                    content: `
                    <svg t="1725523211668" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4371" width="16" height="16">
                      <path d="M927.616 465.6C923.328 236.704 745.888 51.808 528 51.808h-32c-217.888 0-395.328 184.896-399.616 413.76C58.112 487.744 32 528.672 32 576v64c0 70.592 57.408 128 128 128s128-57.408 128-128v-64a128.064 128.064 0 0 0-126.784-127.872C173.728 262.688 318.912 115.808 496 115.808h32c177.12 0 322.272 146.88 334.784 332.32A128.064 128.064 0 0 0 736 576v64c0 57.792 38.72 106.176 91.392 122.016a337.504 337.504 0 0 1-191.936 124.48A79.712 79.712 0 0 0 560 832a80 80 0 1 0 0 160 79.68 79.68 0 0 0 67.872-38.112 402.432 402.432 0 0 0 278.24-193.6C955.968 742.816 992 695.776 992 640v-64c0-47.328-26.112-88.256-64.384-110.4zM224 576v64c0 35.296-28.704 64-64 64s-64-28.704-64-64v-64c0-35.296 28.704-64 64-64s64 28.704 64 64z m704 64c0 34.304-27.2 62.176-61.12 63.712l-2.496-1.184c-0.224 0.512-0.576 0.928-0.8 1.408A64 64 0 0 1 800 640v-64c0-35.296 28.704-64 64-64s64 28.704 64 64v64z" p-id="4372"></path>
                    </svg>
                    咨询
                    `
                  },
                ]
              },
              {
                type: 'div',
                components: [
                  {
                    tagName: 'span',
                    type: 'text',
                    attributes: {
                      class: 'brand-content-text'
                    },
                    content: '联系人：'
                  },
                  {
                    tagName: 'span',
                    type: 'text',
                    attributes: {
                      class: 'brand-content-text'
                    },
                    content: `${sessionStorage.getItem('userName')}`
                  },
                ]
              },
              {
                type: 'div',
                components: [
                  {
                    tagName: 'span',
                    type: 'text',
                    attributes: {
                      class: 'brand-content-text'
                    },
                    content: '手机号：'
                  },
                  {
                    tagName: 'span',
                    type: 'text',
                    attributes: {
                      class: 'brand-content-text'
                    },
                    content: `${sessionStorage.getItem('tel')}`
                  },
                ]
              }
            ],
          },
          {
            type: 'div',
            attributes:{
              class:'brand-iconDiv'
            },
            components:[
              {
                type: 'span',
                attributes:{class: 'iconClick'},
                content: `
                <svg t="1725524126024" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5411" width="18" height="18">
                  <path d="M832 874.474667a21.333333 21.333333 0 0 1-21.376 21.546666H213.376A21.482667 21.482667 0 0 1 192 874.453333v-213.12H149.333333v213.12a64.149333 64.149333 0 0 0 64.042667 64.213334h597.248A64 64 0 0 0 874.666667 874.453333v-213.12h-42.666667v213.12z m-8-303.104a117.056 117.056 0 0 1-137.621333-47.573334l-40.554667-63.872-33.685333 67.712a111.168 111.168 0 0 1-100.096 62.08 111.317333 111.317333 0 0 1-100.138667-62.08l-33.706667-67.712-40.512 63.872a116.778667 116.778667 0 0 1-137.706666 47.573334c-57.429333-26.090667-86.464-93.866667-64.874667-153.685334l40.490667-112.277333 37.418666-147.029333c0.938667-3.797333 7.68-9.045333 11.605334-9.045334h576.405333c4.010667 0 10.645333 5.141333 11.605333 9.045334l38.314667 153.258666 37.930667 105.749334c21.589333 59.861333-7.466667 127.722667-64.874667 153.984m105.002667-168.469334l-36.672-101.610666-38.314667-153.258667C848.32 125.162667 824.576 106.666667 801.024 106.666667h-576.426667c-23.552 0-47.296 18.624-52.992 41.386666L136.746667 287.466667l-1.28 3.434666L94.954667 403.2c-29.333333 81.365333 10.666667 173.184 89.408 207.722667 70.976 25.984 149.76-1.877333 189.354666-64.277334a154.56 154.56 0 0 0 138.325334 85.717334 154.389333 154.389333 0 0 0 138.304-85.717334 159.872 159.872 0 0 0 189.333333 64.277334c78.72-34.730667 118.741333-126.506667 89.322667-208" fill="#3D3D3D" p-id="5412"></path><path d="M746.645333 362.666667H277.354667a21.333333 21.333333 0 1 0 0 42.666666h469.290666a21.333333 21.333333 0 1 0 0-42.666666" fill="#3D3D3D" p-id="5413"></path>
                </svg>
                进店逛逛
                `
              },
              {
                type: 'div',
                attributes: {class:'brand-iconDivider'}
              },
              {
                type: 'span',
                content: `
                <svg t="1725524282460" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6429" width="18" height="18">
                  <path d="M667.786667 117.333333C832.864 117.333333 938.666667 249.706667 938.666667 427.861333c0 138.250667-125.098667 290.506667-371.573334 461.589334a96.768 96.768 0 0 1-110.186666 0C210.432 718.368 85.333333 566.112 85.333333 427.861333 85.333333 249.706667 191.136 117.333333 356.213333 117.333333c59.616 0 100.053333 20.832 155.786667 68.096C567.744 138.176 608.170667 117.333333 667.786667 117.333333z m0 63.146667c-41.44 0-70.261333 15.189333-116.96 55.04-2.165333 1.845333-14.4 12.373333-17.941334 15.381333a32.32 32.32 0 0 1-41.770666 0c-3.541333-3.018667-15.776-13.536-17.941334-15.381333-46.698667-39.850667-75.52-55.04-116.96-55.04C230.186667 180.48 149.333333 281.258667 149.333333 426.698667 149.333333 537.6 262.858667 675.242667 493.632 834.826667a32.352 32.352 0 0 0 36.736 0C761.141333 675.253333 874.666667 537.6 874.666667 426.698667c0-145.44-80.853333-246.218667-206.88-246.218667z" fill="#000000" p-id="6430"></path>
                </svg>
                关注服务商
                `
              },
          ]
          }
        ],

        styles: `
          .brand {
            width: 330px;
            height: 500px;
            border: 1px solid lightgray;
        }
        .brand-img{
            width: 100%;
            height: 60%;
        }
        .brand-content{
          height: 25%;
          margin: 2% 0 0 5%;
        }
        .brand-content-text{
          font-size: 16px;
          line-height: 1.9;
        }
        .brand-iconDiv{
          height: 13%;
          width: 80%;
          margin: 0 5%;
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
        .brand-iconDivider{
          height: 70%;
          margin: 10% 0;
          border: 1px solid lightgray;
        }
        
        `,
        script() {
          var th = document.getElementById(this.id);
          sessionStorage.setItem('userName','张三');
          sessionStorage.setItem('tel','1888888888'); 
          let icon =  th.querySelector('.iconClick');
          // 点击进入店铺列表界面
          icon.addEventListener('click',()=>{
            console.log("点击了");
          })

        }
      },
    },
  })

  // 注册组件
  editor.BlockManager.add('add-brandCard', {
    label: '品牌卡片',
    category: '产品中心组件',
    media: `<svg t="1721012684965" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6962" width="30" height="30"><path d="M719.471424 1024h-497.330477C126.940151 999.219818 54.412789 949.745797 28.959139 848.311101l0.379906-47.988937c26.455218-99.707853 94.043812-155.053137 193.406296-171.112768 37.317054-6.043947 76.447293-0.9843 116.458221-0.984299l-127.751767-299.814297c-24.555692-57.624715-11.828867-103.610516 39.458338-139.874197s110.984131-51.45989 171.889847-59.817805c67.830351-9.324946 125.662288-38.197744 178.831751-79.590145 21.999966-17.113004 45.813117-31.894771 68.883725-47.626301l19.755071-1.450547c42.048601 20.722103 53.825663 40.632591 46.175754 91.919797-25.160087 168.539773-143.845933 385.241168-362.049681 419.708932l31.860234 74.081519c5.180526-3.453684 7.805326-4.783352 9.860267-6.700146 115.69841-107.236884 249.85676-126.301219 393.426399-73.131756 101.106595 37.420665 172.684194 108.791042 184.012277 221.45021 11.638915 115.007673-46.365706 196.65276-143.535102 249.822223-40.045465 21.948161-86.825613 31.566671-130.549251 46.797416z m-251.618138-81.161571v4.127152c65.291894 0 130.601056 0.673468 195.875681-0.172684 73.252635-0.967031 140.530397-19.893219 195.77207-70.800519 66.759709-61.61372 76.792661-151.96209 24.918329-221.363868-96.841296-129.513145-330.672962-130.808277-429.482858-2.883826-11.120862 14.384593-11.880673 26.351608-4.645205 42.393969 18.373598 40.788007 35.469333 82.163139 52.495995 123.538272 9.532167 23.191487 0.345368 40.563517-21.067471 50.078417s-38.992091 0.518053-48.662406-19.202483c-13.65932-27.905766-24.642034-57.106663-37.299786-85.478676-3.453684-7.805326-7.270005-16.38773-13.33122-21.999966-65.499115-60.439468-199.847417-48.144353-253.517664 22.794314-27.629471 36.574512-28.527429 82.111334-0.9843 119.307509 25.660871 34.657718 61.354694 56.985784 103.506905 58.712626 78.674919 3.263731 157.608864 0.949763 236.42193 0.949763zM649.327105 112.555557c-69.954367 52.426921-146.660686 83.337392-232.571072 96.202365-40.390833 6.061215-79.521071 23.778613-117.684278 39.87278-21.602793 9.117725-31.204034 26.921466-16.923051 52.340579 12.295115 21.896356 20.359466 46.158485 30.271539 69.384509 30.910471 72.337409 41.271522 76.464561 114.938599 45.77858 2.693873-1.122447 5.422284-2.193089 8.029815-3.453684 123.969983-62.218115 181.456551-172.062531 213.938448-300.125129z" p-id="6963"></path></svg>`,
    content: {
      type: 'addBrandCard',
    },
  });
};